import React from "react";
import { Outlet, Link, NavLink, useNavigate } from "react-router-dom";
import "./index.less";
export default function Center() {
  //useNavigate提供一个函数 函数内部可以直接书写路由地址 专门让我们进行编程式路由导航
  const navigate = useNavigate();
  return (
    <div>
      <h1>Center</h1>
      <div>
        <Link to="/center/music">
          <button>music</button>
        </Link>
        <Link to="/center/news">
          <button>news</button>
        </Link>
        <Link to="/center/game">
          <button>game</button>
        </Link>
        <hr />
        <NavLink
          to="/center/music"
          className={({ isActive }) => {
            return isActive ? "active" : "";
          }}
        >
          <button>music</button>
        </NavLink>
        <NavLink
          to="/center/news"
          className={({ isActive }) => {
            return isActive ? "active" : "";
          }}
        >
          <button>news</button>
        </NavLink>
        <NavLink
          to="/center/game"
          className={({ isActive }) => {
            return isActive ? "active" : "";
          }}
        >
          <button>game</button>
        </NavLink>
      </div>
      <hr />
      <div>
        <button
          onClick={() => {
            navigate("/center/music");
          }}
        >
          music
        </button>
        <button
          onClick={() => {
            navigate("/center/news");
          }}
        >
          news
        </button>
        <button
          onClick={() => {
            navigate("/center/game");
          }}
        >
          game
        </button>
      </div>
      <div>
        <button
          onClick={() => {
            navigate(1);
          }}
        >
          前进
        </button>
        <button
          onClick={() => {
            navigate(-1);
          }}
        >
          后退
        </button>
        <button
          onClick={() => {
            navigate(2);
          }}
        >
          前进2
        </button>
      </div>
      {/* {在一个组件的二级路由区域 是由Outlet组件占位 未来一旦二级路由匹配 就把二级路由的组件替换Outlet组件} */}
      <Outlet />
    </div>
  );
}
